<template>
  <div>
    <div id="CesiumPanelDiv">
      <div id="cesiumContainer"></div>
    </div>


    

    <v-btn
      style="position: absolute; right: 0%; bottom: 10%"
      v-show="bshowpanos"
      absolute
      dark
      fab
      bottom
      right
      color="blue"
      @click="begindrawpath"
    >
      <v-icon>mdi-share-variant-outline</v-icon>
    </v-btn>

        <v-dialog v-model="testpanoshow" v-show="testpanoshow" width="800px"  eager>
      <v-card>
        <v-toolbar color="primary" dark>{{ titlename }}</v-toolbar>
        <div id="testviewer"></div>
      </v-card>
        </v-dialog>

    <v-dialog v-model="show" width="800px" persistent eager>
      <v-card>
        <v-toolbar color="primary" dark>{{ titlename }}</v-toolbar>
        <div id="viewer"></div>

        <div id="choosecameralist">
          <v-list dense>
            <v-subheader>拍摄类型</v-subheader>
            <v-list-item-group v-model="selectcameratype" color="primary">
              <v-list-item
                v-for="(item, i) in cameraitems"
                :key="i"
                @click="choosecameratype(item.status)"
              >
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </div>

        <div id="chooselist">
          <v-list dense>
            <v-subheader>审核状态</v-subheader>
            <v-list-item-group v-model="selectedItem" color="primary">
              <v-list-item
                v-for="(item, i) in items"
                :key="i"
                @click="choosestatus(item.status)"
              >
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title v-text="item.text"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </div>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="show = false"> 关闭 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-slider
      v-show="bshowpanos"
      style="position: absolute; right: 10%; bottom: 10%"
      vertical
      min="1"
      max="10"
      thumb-label="always"
      v-model="pointsize"
      @change="changepointsize"
    ></v-slider>

    <v-container
      v-show="bshowpanos"
      fluid
      style="position: absolute; bottom: 10%"
    >
      <v-row>
        <v-col cols="12" sm="6" class="py-2">
          <v-btn-toggle dense background-color="primary">
            <v-btn @click="flyto">
              <v-icon>mdi-panorama</v-icon>
            </v-btn>

            <v-btn @click="showpanos('none')">
              <v-icon>mdi-timer-sand-empty</v-icon>
            </v-btn>

            <v-btn @click="showpanos('wrongpos')">
              <v-icon>mdi-alert-box-outline</v-icon>
            </v-btn>

            <v-btn @click="showpanos('query')">
              <v-icon>mdi-account-question-outline</v-icon>
            </v-btn>

            <v-btn @click="showpanos('nopics')">
              <v-icon>mdi-border-none-variant</v-icon>
            </v-btn>

            <v-btn @click="showpanos('ok')">
              <v-icon>mdi-account-check-outline</v-icon>
            </v-btn>
          </v-btn-toggle>
        </v-col>
      </v-row>
    </v-container>

    <v-container
      v-show="bshowpanos"
      fluid
      style="position: absolute; bottom: 10%"
    >
      <v-row>
        <v-col cols="12" sm="6" class="py-2">
          <v-btn-toggle
            @change="drawpathchange()"
            v-model="toggle_one"
          >
            <v-btn>
              <v-icon>mdi-close-circle</v-icon>
            </v-btn>
            <v-btn>
              <v-icon>mdi-vector-polyline</v-icon>
            </v-btn>

            <v-btn>
              <v-icon>mdi-vector-polygon</v-icon>
            </v-btn>

            <v-btn>
              <v-icon>mdi-panorama</v-icon>
            </v-btn>
             <v-btn>
              <v-icon>mdi-panorama</v-icon>
            </v-btn> <v-btn>
              <v-icon>mdi-panorama</v-icon>
            </v-btn> <v-btn>
              <v-icon>mdi-panorama</v-icon>
            </v-btn> <v-btn>
              <v-icon>mdi-panorama</v-icon>
            </v-btn>
          </v-btn-toggle>
        </v-col>
      </v-row>
    </v-container>

    <v-snackbar v-model="snackbar">
      需要标记为无图么？
      <template>
        <v-btn color="red" @click="choosestatus('nopics')"> 需要 </v-btn>

        <v-btn color="blue" @click="snackbar = false"> 不管 </v-btn>
      </template>
    </v-snackbar>
  
    <img style="position:absolute; width:1920px; height:80px; top:0px; left:0px;" src="./../assets/img/title.png">
    <div style="position:absolute; left:810px; width:300px; height:38px; top:14px; font-size:30px; color:white; ">机场净空检测管理系统</div>
    <div id="time" style="position:absolute; left:38px; width:77px; height:23px; top:40px; font-size:18px; color:#3CFFFF; font-weight: bold;">时间</div>
    <div id="date" style="position:absolute; left:127px; width:142px; height:20px; top:41.5px; font-size:16px; color:#3CFFFF;">日期</div>

  <!--菜单按钮 -->
    <v-container
      fluid
      style="position: fixed; bottom: 30px; left:510px; width:940px; height:110px;"
    >
      <v-row>
        <v-col cols="12" sm="6" class="py-2" style="position:absolute; max-width:100%;">
          <v-btn-toggle>
          <div v-for="btn in menuBtnsList" :key="btn.name">
          <v-btn class="menuBtnClass" @click="menuBtnClicked(btn.name)">
              <img class="btnImgClass" :src="btn.src">
              <div class="btnNameClass" :id="btn.nameId" >{{btn.name}}</div>
            </v-btn>
          </div>
            
          </v-btn-toggle>
        </v-col>
      </v-row>
    </v-container>
    
    <!--子菜单按钮 -->
    <div v-show="bshowSubMenu" id="submenuID" class="subbtnBorderClass">
      <v-container fluid >
        <v-row>
        <v-col cols="12" sm="6" class="py-2" style="position:absolute; max-width:100%;">
          <v-btn-toggle>
          <div v-for="btn in subBtnsList" :key="btn.name">
          <v-btn class="sbuBtnClass" @click="subBtnClicked(btn.name)">
              <v-img class="subBtnImgClass"></v-img>
              <div class="subBtnNameClass" :id="btn.nameId" >{{btn.name}}</div>
            </v-btn>
          </div>
            
          </v-btn-toggle>
        </v-col>
      </v-row>
      </v-container>

    </div>
   

   <v-dialog content-class="dlgClass"  v-model="dlgShow" >
     <v-card style="background-color:transparent">
        <v-toolbar class="titleClass" color="primary"  style="background-color:transparent !important; color:#3CFFFF;" dark>{{ titlename }}
          <v-btn color="primary" icon dark @click="dlgShow = false" style="position:absolute; right:32px; top:20px;width:20px; height:20px;"> 
            <v-icon>mdi-close</v-icon>  
          </v-btn>
        </v-toolbar>

        <table class="tableClass" >
          <thead>
            <th style="width: 116px;;">序号</th>
            <th style="width: 116px;;">检测日期</th>
            <th style="width: 116px;">图斑数量</th>
            <th style="width: 192px;">操作</th>
          </thead>
          <tbody>
            <tr style="height:40px;"  v-for="item in tableData" :key="item.id">
              <td >{{item.td1}}</td>
              <td >{{item.td2}}</td>
              <td >{{item.td3}}</td>
              <td >
                <v-btn style="background-color:yellow; color:black;  border-radius:0px; width:88px; height:30px;">超高分析</v-btn>
              </td>
            </tr>
          </tbody>
        </table>
      </v-card>
  </v-dialog>

     <v-dialog content-class="dlg1Class" v-model="dlgShow1" >
       <v-toolbar class="titleClass" color="primary"  style="background-color:transparent !important; color:#3CFFFF;" dark>{{ titlename }}
          <v-btn color="primary" icon dark @click="dlgShow1 = false" style="position:absolute; right:32px; top:20px;width:20px; height:20px;"> 
            <v-icon>mdi-close</v-icon>  
          </v-btn>
        </v-toolbar>
        <v-combobox color="white" class="comboboxClass" style="position:absolute; top:80px; left:20px; width:141px; height:32px;" :items="items1" label="当期" solo></v-combobox>
        <v-btn style="position:absolute;top:80px; right:20px; background-color:yellow; color:black; width: 88px; height:32px; border-radius:0px;">一键下发</v-btn>
        

          <table class="tableClass" style="top:132px;">
            <thead>
              <th style="width: 74px;;">选择</th>
              <th style="width: 116px;;">序号</th>
              <th style="width: 116px;;">检测日期</th>
              <th style="width: 116px;">图斑数量</th>
              <th style="width: 120px;">操作</th>
            </thead>
            <tbody>
              <tr style="height:40px;"  v-for="item in tableData" :key="item.id">
                <td >
                  <input type="checkbox">
                </td>
                <td >{{item.td1}}</td>
                <td >{{item.td2}}</td>
                <td >{{item.td3}}</td>
                <td >
                  <v-btn style="background-color:yellow; color:black; width: 68px; height:30px; border-radius:0px;">下发</v-btn>
                </td>
              </tr>
            </tbody>
          </table>

        <v-btn style="position:absolute;bottom:12px; right:90px; background-color:transparent; color:#0E9866; width: 72px; height:28px; border:1px solid #0E9866;">下一页</v-btn>
        <v-btn style="position:absolute;bottom:12px; right:8px; background-color:transparent; color:#0E9866; width: 72px; height:28px; border:1px solid #0E9866;">上一页</v-btn>
  </v-dialog>

  <!--图层管理-->
<v-dialog content-class="dlg2Class"  v-model="layerdlgshow" >
     <v-card style="background-color:transparent">
 <v-toolbar class="titleClass" color="primary"  style="background-color:transparent !important; color:#3CFFFF;" dark>{{ titlename }}
          <v-btn color="primary" icon dark @click="layerdlgshow = false" style="position:absolute; right:32px; top:20px;width:20px; height:20px;"> 
            <v-icon>mdi-close</v-icon>  
          </v-btn>
        </v-toolbar>

      <v-treeview
    selectable
    item-disabled="locked"
    
    :items="treeitems"
  ></v-treeview>


     </v-card>
</v-dialog>



    <v-dialog content-class="dlg2Class"  v-model="dlgShow2" >
     <v-card style="background-color:transparent">
        <v-toolbar class="titleClass" color="primary"  style="background-color:transparent !important; color:#3CFFFF;" dark>{{ titlename }}
          <v-btn color="primary" icon dark @click="dlgShow2 = false" style="position:absolute; right:32px; top:20px;width:20px; height:20px;"> 
            <v-icon>mdi-close</v-icon>  
          </v-btn>
        </v-toolbar>

        <table class="tableClass" >
          <thead>
            <th style="width: 68px;;">序号</th>
            <th style="width: 116px;;">姓名</th>
            <th style="width: 136px;">手机号</th>
            <th style="width: 220px;">操作</th>
          </thead>
          <tbody>
            <tr style="height:40px;"  v-for="item in tableData" :key="item.id">
              <td >{{item.td1}}</td>
              <td >{{item.td2}}</td>
              <td >{{item.td3}}</td>
              <td >
                <v-btn style="background-color:yellow; color:black; width:68px; height:30px; border-radius:0px; margin-right:10px;">轨迹</v-btn>
                <v-btn style="background-color:#20DFAB; color:black; width:68px; height:30px; border-radius:0px;">定位</v-btn>
              </td>
            </tr>
          </tbody>
        </table>
      </v-card>
  </v-dialog>
  </div>






  
</template>



<script lang="ts">
import Vue from "vue";

const axios = require("axios").default;
import Cesium from "../plugins/cesium";
import { Viewer } from "photo-sphere-viewer";
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { createApp } from "@vue/composition-api";

import { Graticule } from "../plugins/Graticule.js";

import { moveable } from "../plugins/moveable.js";

import MeasureDistance from "../plugins/measure.js";




import MeasurePolyline from "../plugins/measurepolyline.js";
// css
import "./../assets/css/css.css"

/*
  export default {
    data: () => ({ loading: false }),

    methods: {
      async remove () {
        this.loading = true

        await new Promise(resolve => setTimeout(resolve, 3000))

        this.loading = false
      },
    },
  }*/

Vue.prototype.$PSV = null;

Vue.prototype.$pointsize = 1;

Vue.prototype.$helloworld = function (num) {
  console.log(num);
};

Vue.prototype.$auditstatusdict = new Map();
Vue.prototype.$auditstatusdict.set("none", 0);
Vue.prototype.$auditstatusdict.set("error", 1);
Vue.prototype.$auditstatusdict.set("wrongpos", 2);
Vue.prototype.$auditstatusdict.set("query", 3);
Vue.prototype.$auditstatusdict.set("ok", 4);
Vue.prototype.$auditstatusdict.set("nopics", 5);

//颜色hash
Vue.prototype.$auditstatuscolordict = new Map();

Vue.prototype.$auditstatuscolordict.set(
  "none",
  Cesium.Color.fromCssColorString("#11eec2")
);
Vue.prototype.$auditstatuscolordict.set(
  "error",
  Cesium.Color.fromCssColorString("#ff0000")
);
Vue.prototype.$auditstatuscolordict.set(
  "wrongpos",
  Cesium.Color.fromCssColorString("#ff0000")
);
Vue.prototype.$auditstatuscolordict.set(
  "query",
  Cesium.Color.fromCssColorString("#e6e61a")
);
Vue.prototype.$auditstatuscolordict.set(
  "ok",
  Cesium.Color.fromCssColorString("#2222dd")
);
Vue.prototype.$auditstatuscolordict.set(
  "nopics",
  Cesium.Color.fromCssColorString("#cc3333")
);

//        { text: "未知", status: "none", icon: "mdi-timer-sand-empty" },
//       { text: "无人机", status: "plane", icon: "mdi-plane" },
//       { text: "地面", status: "camera", icon: "mdi-camera" },

Vue.prototype.$cameratypedict = new Map();
Vue.prototype.$cameratypedict.set("none", 0);
Vue.prototype.$cameratypedict.set("plane", 1);
Vue.prototype.$cameratypedict.set("camera", 2);

Vue.prototype.$labeltooltip = null;
Vue.prototype.$hidetooltip = function () {
  // window.cesiumViewer._container.style.cursor === "crosshair";

  if (Vue.prototype.$labeltooltip == null) {
    Vue.prototype.$labeltooltip = Vue.prototype.$csViewer.entities.add({
      label: {
        show: false,
        //fillColor: Cesium.Color.YELLOW,
        //showBackground: true,
        // font: "14px monospace",
        font: "normal 24px MicroSoft YaHei",
        scale: 0.5,
        //fillColor:Cesium.Color.BLACK,
        fillColor: Cesium.Color.fromCssColorString("#000"),
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        showBackground: true,
        backgroundColor: Cesium.Color.fromCssColorString("#fff"),
        outlineWidth: 1,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        pixelOffset: new Cesium.Cartesian2(15, 0),
      },
    });
  }

  if (Vue.prototype.$labeltooltip != null) {
    Vue.prototype.$labeltooltip.label.show = false;
  }
};

//

Vue.prototype.$installleftclick = function () {
  var handler = new Cesium.ScreenSpaceEventHandler(
    Vue.prototype.$csViewer.canvas
  );

  //鼠标左键
  handler.setInputAction((event) => {
    let pickedObject = Vue.prototype.$csViewer.scene.pick(event.position);
    //城镇目标
    if (
      pickedObject != null &&
      pickedObject.id != null &&
      typeof pickedObject.id == "string" &&
      pickedObject.id.indexOf("全景图_") != -1
    ) {
      let ray2 = Vue.prototype.$csViewer.camera.getPickRay(event.position);

      var earthPositionmd = Vue.prototype.$csViewer.scene.globe.pick(
        ray2,
        Vue.prototype.$csViewer.scene
      );
      if (Cesium.defined(earthPositionmd)) {
        let lable = pickedObject.id;
        lable = lable.toString();
        let namelength = lable.lastIndexOf("_");
        let name2 = lable.substring(namelength + 1, lable.length);

        let that = this;

        Vue.prototype.$shwotootip(
          Vue.prototype.$gettooltiptext(pickedObject.id),
          earthPositionmd
        );
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

//显示提示 传入参数 提示名 位置

Vue.prototype.$shwotootip = function (text, pos) {
  Vue.prototype.$csViewer._container.style.cursor = "pointer";

  //console.log(text,pos,carto);
  if (Vue.prototype.$labeltooltip == null) {
    Vue.prototype.$labeltooltip = Vue.prototype.$csViewer.entities.add({
      label: {
        show: false,
        // fillColor: Cesium.Color.YELLOW,
        // showBackground: true,
        // font: "14px monospace",
        font: "normal 24px MicroSoft YaHei",
        scale: 0.5,
        //fillColor:Cesium.Color.BLACK,
        fillColor: Cesium.Color.fromCssColorString("#000"),
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        showBackground: true,
        backgroundColor: Cesium.Color.fromCssColorString("#fff"),
        outlineWidth: 1,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.TOP,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        pixelOffset: new Cesium.Cartesian2(15, 0),
      },
    });
  }

  //  console.log(window.labeltooltip)

  if (Vue.prototype.$labeltooltip != null) {
    var earthPosition = pos;

    var tmpcarto = Cesium.Cartographic.fromCartesian(earthPosition);
    //    console.log(tmpcarto,earthPosition);
    Vue.prototype.$labeltooltip.label.show = true;
    Vue.prototype.$labeltooltip.position = earthPosition;
    Vue.prototype.$labeltooltip.label.text = text;
    Vue.prototype.$labeltooltip.label.eyeOffset = new Cesium.Cartesian3(
      0.0,
      0.0,
      -tmpcarto.height *
        (Vue.prototype.$csViewer.scene.mode === Cesium.SceneMode.SCENE2D
          ? 1.5
          : 1.0)
    );
  }
};
Vue.prototype.$serverip = "http://47.100.205.27:8082";
//Vue.prototype.$serverip = "";
Vue.prototype.$citymblist = null;

Vue.prototype.$citymbuuidindex = new Map();

Vue.prototype.$panoiddict = null;
Vue.prototype.$citymbcolorhash = {};
Vue.prototype.$citymblistinview = false;
Vue.prototype.$gettooltiptext = function (id) {
  if (Vue.prototype.$tooltipdict == null) {
    Vue.prototype.$tooltipdict = new Map();
  }

  var text = "";

  if (Vue.prototype.$tooltipdict.has(id))
    text = Vue.prototype.$tooltipdict.get(id);
  return text;
};

Vue.prototype.$settooltiptext = function (id, val) {
  if (Vue.prototype.$tooltipdict == null) {
    Vue.prototype.$tooltipdict = new Map();
  }
  Vue.prototype.$tooltipdict.set(id, val);

  /*var text = '';

    if(window.tooltipdict.has(id))
    text = window.tooltipdict.get(id);
    return text;*/
};

Vue.prototype.$showcitymb = function (mblist) {
  if (Vue.prototype.$tooltipdict == null) {
    Vue.prototype.$tooltipdict = new Map();
  }

  if (Vue.prototype.$panoiddict == null) {
    Vue.prototype.$panoiddict = new Map();
  }

  if (Vue.prototype.$citymblist == null) {
    Vue.prototype.$citymblist = Vue.prototype.$csViewer.scene.primitives.add(
      new Cesium.PointPrimitiveCollection()
    );

    //console.log(window.citymblist);
    Vue.prototype.$citymblistinview = false;
  }

  if (Vue.prototype.$citymblist != null) {
    for (var i = 0; i != mblist.length; ++i) {
      var colorindex = "";
      // var color = citymbcolorhash[colorindex];
      // if (!color) color = Cesium.Color.fromRandom({ alpha: 1 });
      // citymbcolorhash[colorindex] = color;
      //Cesium.Color.fromRandom({ alpha: 1 });
      var color = Vue.prototype.$auditstatuscolordict.get(
        mblist[i].auditstatus
      );
      var name = "全景图_" + colorindex + mblist[i].filename;
      var id =
        "全景图_" + colorindex + mblist[i].filename + "_" + mblist[i].uuid;
      var tooltiptext = colorindex + mblist[i].filename; //为弹出框预留
      //var
      //auditstatus":"none","cameratype
      Vue.prototype.$panoiddict.set(id, mblist[i]);
      Vue.prototype.$tooltipdict.set(id, tooltiptext);
      //var near = 0;
      //var far = 5000;
      //var distanceDisplayCondition = new Cesium.DistanceDisplayCondition(near, far);
      Vue.prototype.$citymbuuidindex.set(id, i);
      Vue.prototype.$citymblist.add({
        name: name,
        id: id,
        // distanceDisplayCondition:distanceDisplayCondition,
        position: Cesium.Cartesian3.fromDegrees(mblist[i].lng, mblist[i].lat),
        pixelSize: Vue.prototype.$pointsize,
        color: color,
      });
    }
    Vue.prototype.$citymblistinview = true;
  }
};

Vue.prototype.$removeallcitymb = function () {
  if (Vue.prototype.$citymblist != null) {
    Vue.prototype.$citymblist.removeAll();
    Vue.prototype.$citymblistinview = false;
  }
};

//  gra

//end gra

export default Vue.extend({
  name: "HelloCesium",
  props: [],

  created()
  {

    
     this.$store.dispatch("aLoad1stDataSet").then(() => {
      // initial action must return a promise after the data is loaded sucessfully
      this.$store.dispatch("aLoad2ndDataSet");
    });

    this.$store.dispatch("aCsInit").then(() => {
      //this.$store.dispatch("aLoad1stDataSet");
    });
    
    let ratio=0;
      if(window.devicePixelRatio !== undefined)
      {
        ratio = window.devicePixelRatio
      }

      if(ratio)
      {
          ratio = Math.round(ratio * 100)
      }
      document.body.style.setProperty('zoom',100 / Number(ratio) + '')
  },

  data() {
    return {
      selectedItem: 1,


      treeitems: [
        {
          id: 1,
          name: 'Applications :',
          locked: true,
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        },
        {
          id: 5,
          name: 'Documents :',
          children: [
            {
              id: 6,
              name: 'vuetify :',
              children: [
                {
                  id: 7,
                  name: 'src :',
                  locked: true,
                  children: [
                    { id: 8, name: 'index : ts' },
                    { id: 9, name: 'bootstrap : ts' },
                  ],
                },
              ],
            },
            {
              id: 10,
              name: 'material2 :',
              children: [
                {
                  id: 11,
                  name: 'src :',
                  children: [
                    { id: 12, name: 'v-btn : ts' },
                    { id: 13, name: 'v-card : ts' },
                    { id: 14, name: 'v-window : ts' },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 15,
          name: 'Downloads :',
          children: [
            { id: 16, name: 'October : pdf', locked: true },
            { id: 17, name: 'November : pdf', locked: true },
            { id: 18, name: 'Tutorial : html', locked: true },
          ],
        },
        {
          id: 19,
          name: 'Videos :',
          children: [
            {
              id: 20,
              name: 'Tutorials :',
              children: [
                { id: 21, name: 'Basic layouts : mp4' },
                { id: 22, name: 'Advanced techniques : mp4' },
                { id: 23, name: 'All about app : dir' },
              ],
            },
            { id: 24, name: 'Intro : mov' },
            { id: 25, name: 'Conference introduction : avi' },
          ],
        },
      ],


      //selectedItem: 1,
      layeritems: [
        { text: 'Real-Time', icon: 'mdi-clock' },
        { text: 'Audience', icon: 'mdi-account' },
        { text: 'Conversions', icon: 'mdi-flag' },
      ],


      toggle_one: "",
      selecteduuid: "",
      selecteduid: "",
      snackbar: false,
      pointsize: 1,
      beginmove: false,
      bshowpanos: false,
      testpanoshow:false,
      titlename: "全景图效果",
      items: [
        { text: "未审核", status: "none", icon: "mdi-timer-sand-empty" },
        { text: "质量差报废", status: "error", icon: "mdi-close-box-outline" },
        { text: "位置错误", status: "wrongpos", icon: "mdi-alert-box-outline" },
        { text: "存疑", status: "query", icon: "mdi-account-question-outline" },
        { text: "审核完毕", status: "ok", icon: "mdi-account-check-outline" },
      ],

      selectcameratype: 0,
      cameraitems: [
        { text: "未知", status: "none", icon: "mdi-timer-sand-empty" },
        { text: "无人机", status: "plane", icon: "mdi-airplane" },
        { text: "地面", status: "camera", icon: "mdi-camera" },
      ],
      show: false,
      bshowSubMenu:false,
      menuBtnsList:[
        {src:require("./../assets/img/Property 1=icon空间量算.png"),name:"空间量算",nameId:"btn1"},
        {src:require("./../assets/img/Property 1=icon净空区分析.png"),name:"净空区分析",nameId:"btn2"},
        {src:require("./../assets/img/Property 1=icon三维模型.png"),name:"三维模型",nameId:"btn3"},
        {src:require("./../assets/img/Property 1=icon遥感监测.png"),name:"遥感监测",nameId:"btn4"},
        {src:require("./../assets/img/Property 1=icon巡视轨迹.png"),name:"巡视轨迹",nameId:"btn5"},
        {src:require("./../assets/img/Property 1=icon图层控制.png"),name:"图层控制",nameId:"btn6"},
      ],
      subBtnsList:[] as any[],
      dlgShow:false,
      tableData:[] as any[],
      dlgShow1:false,
      curremtBtnName:"",
      select:"当期",
      items1:['当期1','当期2','当期3'],
      dlgShow2:false,

      layerdlgshow:false,
    };
  },

  methods: {


    subBtnClicked(btnName)
    {
      
      if(btnName === "超高建筑分析")
      {
        this.dlgShow = true
        this.titlename = "超高建筑分析"
        this.tableData = [
          {id:"01", td1:"1",td2:"2022-02",td3:"1"},
          {id:"02", td1:"2",td2:"2022-02",td3:"1"},
        ];
      }

      if(btnName === "图斑下发")
      {
        this.dlgShow1 = true
        this.titlename = "图斑下发"
        this.tableData = [
          {id:"01", td1:"1",td2:"123131",td3:"孙思达"},
          {id:"02", td1:"2",td2:"123131",td3:"吴萍兰"},
          {id:"03", td1:"3",td2:"123131",td3:"郑文鉴"},
          {id:"04", td1:"4",td2:"123131",td3:"李冠英"},
          {id:"05", td1:"5",td2:"123131",td3:"孙思达"},
          {id:"06", td1:"6",td2:"123131",td3:"吴萍兰"},
          {id:"07", td1:"7",td2:"123131",td3:"郑文鉴"},
          {id:"08", td1:"8",td2:"123445",td3:"李冠英"},
          {id:"09", td1:"9",td2:"123131",td3:"郑文鉴"},
          {id:"10", td1:"10",td2:"123445",td3:"李冠英"},
        ];
      }

      if(btnName === "巡视人员")
      {
        this.dlgShow2 = true
        this.titlename = "巡视人员"
        this.tableData = [
          {id:"01", td1:"1",td2:"王本强",td3:"13474518436"},
          {id:"02", td1:"2",td2:"周薇",td3:"18345388321"},
          {id:"03", td1:"3",td2:"冯惠婉",td3:"13289271523"},
          {id:"04", td1:"4",td2:"何永毅",td3:"13834892116"},
          {id:"05", td1:"5",td2:"李徊",td3:"13590232929"},
        ];
      }
    },

    menuBtnClicked(btnName) {
      //按钮响应事件
      console.log(btnName);
      
      if(this.curremtBtnName === btnName)
      {
        this.bshowSubMenu = !this.bshowSubMenu;
      }
      else{
        this.curremtBtnName = btnName;
        this.bshowSubMenu = true;
        this.menuBtnsList=[
        {src:require("./../assets/img/Property 1=icon空间量算.png"),name:"空间量算",nameId:"btn1"},
        {src:require("./../assets/img/Property 1=icon净空区分析.png"),name:"净空区分析",nameId:"btn2"},
        {src:require("./../assets/img/Property 1=icon三维模型.png"),name:"三维模型",nameId:"btn3"},
        {src:require("./../assets/img/Property 1=icon遥感监测.png"),name:"遥感监测",nameId:"btn4"},
        {src:require("./../assets/img/Property 1=icon巡视轨迹.png"),name:"巡视轨迹",nameId:"btn5"},
        {src:require("./../assets/img/Property 1=icon图层控制.png"),name:"图层控制",nameId:"btn6"},]
      }

      console.log(this.curremtBtnName , btnName, this.bshowSubMenu);

      if(btnName =="空间量算")
      {
        this.menuBtnsList[0].src = require("./../assets/img/Property 1=icon空间量算2.png")
        document.getElementById("submenuID")?.setAttribute('style','width:694px; left:300px;')
        this.subBtnsList=[
        {src:require("./../assets/img/弹层icon1.png"),name:"距离测量",nameId:"subBtn1"},
        {src:require("./../assets/img/弹层icon1.png"),name:"面积量算",nameId:"subBtn2"},
        {src:require("./../assets/img/弹层icon1.png"),name:"高度量测",nameId:"subBtn3"},
        {src:require("./../assets/img/弹层icon1.png"),name:"定点距离",nameId:"subBtn4"}
        ];
      }

      if(btnName =="净空区分析")
      {
        this.menuBtnsList[1].src = require("./../assets/img/Property 1=icon净空区分析2.png")
        document.getElementById("submenuID")?.setAttribute('style','width:362px; left:596px') 
        this.subBtnsList=[
        {name:"净空区模型",nameId:"subBtn1"},
        {name:"高度分析",nameId:"subBtn2"},
        ];
      }
      if(btnName =="三维模型")
      {
        this.menuBtnsList[2].src = require("./../assets/img/Property 1=icon三维模型2.png")

      }
      if(btnName =="遥感监测")
      {
        this.menuBtnsList[3].src = require("./../assets/img/Property 1=icon遥感监测2.png")
        document.getElementById("submenuID")?.setAttribute('style','width:694px; left:690px') 
        this.subBtnsList=[
        {name:"成果导入",nameId:"subBtn1"},
        {name:"超高建筑分析",nameId:"subBtn2"},
        {name:"手动标注",nameId:"subBtn3"},
        {name:"图斑下发",nameId:"subBtn4"}
        ];
      }
      if(btnName =="巡视轨迹")
      {
        this.menuBtnsList[4].src = require("./../assets/img/Property 1=icon巡视轨迹2.png")
        document.getElementById("submenuID")?.setAttribute('style','width:362px; left:986px') 
        this.subBtnsList=[
        {name:"巡视人员",nameId:"subBtn1"},
        {name:"上报定点",nameId:"subBtn2"},
        ];

      }
      if(btnName =="图层控制")
      
      {
        this.menuBtnsList[5].src = require("./../assets/img/Property 1=icon图层控制2.png")
        this.bshowSubMenu = false;


        this.layerdlgshow = true;
        this.titlename = "图层控制"

        let that = this;


              let url =
        Vue.prototype.$serverip +
        "/GeoArea/Geo/GetLayerTrees";

      axios
        .get(url)
        .then(function (response) {
          // Vue.prototype.$showcitymb(response.data);
          
          //Vue.prototype.$panoiddict.get(that.selecteduid).cameratype = type;

          if(response.data.state =="success")
          {
            that.treeitems = [];

            let temproots = new Map();

            for(var i = 0; i != response.data.data.length; ++i)
            {
              var eachi = response.data.data[i];

              if(eachi.pId == '-1')
              {
                eachi.children = [];
                temproots.set(eachi.id,eachi);
                //that.treeitems.push(eachi);
              }
              else
              {
                if(temproots.has(eachi.pId))
                {
                  temproots.get(eachi.pId).children.push(eachi)
                }

              }

            }

            for(var [k,v] of temproots)
            {
              that.treeitems.push(v);
            }
//console.log(response.data);
/*
{
          id: 1,
          name: 'Applications :',
          locked: true,
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        }


*/




          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
          that.layerdlgshow = false;
        });





       // return;
      } 

      if(this.bshowSubMenu === false)
      {
        this.menuBtnsList=[
        {src:require("./../assets/img/Property 1=icon空间量算.png"),name:"空间量算",nameId:"btn1"},
        {src:require("./../assets/img/Property 1=icon净空区分析.png"),name:"净空区分析",nameId:"btn2"},
        {src:require("./../assets/img/Property 1=icon三维模型.png"),name:"三维模型",nameId:"btn3"},
        {src:require("./../assets/img/Property 1=icon遥感监测.png"),name:"遥感监测",nameId:"btn4"},
        {src:require("./../assets/img/Property 1=icon巡视轨迹.png"),name:"巡视轨迹",nameId:"btn5"},
        {src:require("./../assets/img/Property 1=icon图层控制.png"),name:"图层控制",nameId:"btn6"},]
      }
    },

    begindraw(type) {
      //begindraw('quit')
      if (type == "quit") {
        this.bshowpanos = true;

        if (Vue.prototype.$measuredistance != null) {
          Vue.prototype.$measuredistance.deactivate();
          Vue.prototype.$measuredistance.clear();
        }
      } else if (type == "line") {
      } else if (type == "polygon") {
        //console.log("flyto");

        if (Vue.prototype.$measuredistance == null) {
          Vue.prototype.$measuredistance = new MeasureDistance(
            Vue.prototype.$csViewer
          );

          Vue.prototype.$measuredistance.activate();
          return;
        }

        if (Vue.prototype.$measuredistance.isactivate()) {
          Vue.prototype.$measuredistance.deactivate();
          Vue.prototype.$measuredistance.clear();
        } else {
          Vue.prototype.$measuredistance.activate();
        }

        // var msd = new MeasureDistance(Vue.prototype.$csViewer);
        //  msd.activate();
      }
    },

    begindrawpath() {
      this.bshowpanos = false;
    },

    choosecameratype(type) {
      // console.log("choose status ", this.selectcameratype, type);

      let that = this;

      //GeoArea/Geo/GetLayerTrees

      let url =
        Vue.prototype.$serverip +
        "/DataIO/UpdatePanoscameratype.ashx?uuid=" +
        this.selecteduuid +
        "&cameratype=" +
        type;

      axios
        .get(url)
        .then(function (response) {
          // Vue.prototype.$showcitymb(response.data);
          //console.log(response.data);
          Vue.prototype.$panoiddict.get(that.selecteduid).cameratype = type;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    changepointsize() {
      Vue.prototype.$pointsize = this.pointsize;
      //console.log(this.pointsize);
    },
    choosestatus(status) {
      // console.log("choose status ", this.selectedItem, status);

      //
      let that = this;

      let url =
        Vue.prototype.$serverip +
        "/DataIO/UpdatePanosaudit.ashx?uuid=" +
        this.selecteduuid +
        "&auditstatus=" +
        status;
      // console.log(url);

      axios
        .get(url)
        .then(function (response) {
          // Vue.prototype.$showcitymb(response.data);
          //console.log(response.data);
          Vue.prototype.$panoiddict.get(that.selecteduid).auditstatus = status;

          var index = Vue.prototype.$citymbuuidindex.get(that.selecteduid);

          //console.log(index,Vue.prototype.$citymblist.get(index)._color);

          Vue.prototype.$citymblist.get(
            index
          )._color = Vue.prototype.$auditstatuscolordict.get(status);

          Vue.prototype.$citymblist.get(index).show = false;
          Vue.prototype.$citymblist.get(index).show = true;
          that.snackbar = false;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });

      //this.selecteduuid

      //Vue.prototype.$helloworld(1);
    },
    showpanos(type) {
      console.log(type);

      Vue.prototype.$removeallcitymb();

      //http get 示例

      axios
        .get(
          Vue.prototype.$serverip +
            "/DataIO/GetfullPanoswithtype.ashx?auditstatus=" +
            type
        )
        .then(function (response) {
          //标绘 示例 大量点目标
          Vue.prototype.$showcitymb(response.data);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    flyto() {
      if (this.beginmove == false) {
        // var move = new moveable;

        moveable;
        this.beginmove = false;
      }

      var graticule = new Graticule(
        {
          tileWidth: 512,
          tileHeight: 512,
          numLines: 10,
          color: Cesium.Color.GREEN, //线颜色
          fontColor: Cesium.Color.WHITE, // 文字颜色
          weight: 0.8, // 线宽度|默认0.8
          zoomInterval: [
            //Cesium.Math.toRadians(0.05),
            //Cesium.Math.toRadians(0.1),
            Cesium.Math.toRadians(0.25),
            Cesium.Math.toRadians(0.5),
            Cesium.Math.toRadians(1.0),
            Cesium.Math.toRadians(2.0),
            Cesium.Math.toRadians(5.0), //,
            //Cesium.Math.toRadians(10.0)
          ], // 不同地图缩放级别显示网格的间隔
        },
        Vue.prototype.$csViewer.scene
      );

      Vue.prototype.$csViewer.scene.imageryLayers.addImageryProvider(graticule);

      graticule.setVisible(true);

      //graticule.setVisible = true;

      // console.log(graticule.isVisible(),graticule,Vue.prototype.$csViewer.scene.imageryLayers);

      // console.log(this.$store.state);

      var handler = new Cesium.ScreenSpaceEventHandler(
        Vue.prototype.$csViewer.canvas
      );

      //鼠标左键
      handler.setInputAction((event) => {
        let pickedObject = Vue.prototype.$csViewer.scene.pick(event.position);
        //城镇目标
        if (
          pickedObject != null &&
          pickedObject.id != null &&
          typeof pickedObject.id == "string" &&
          pickedObject.id.indexOf("全景图_") != -1
        ) {
          let ray2 = Vue.prototype.$csViewer.camera.getPickRay(event.position);

          var earthPositionmd = Vue.prototype.$csViewer.scene.globe.pick(
            ray2,
            Vue.prototype.$csViewer.scene
          );
          if (Cesium.defined(earthPositionmd)) {
            let lable = pickedObject.id;
            lable = lable.toString();
            //let namelength = lable.lastIndexOf("_");
            //let name2 = lable.substring(namelength + 1, lable.length);

            let that = this;

            let path = Vue.prototype.$panoiddict.get(pickedObject.id).filepath;

            ///DataIO/GetPanosPicture.ashx

            let uuid = Vue.prototype.$panoiddict.get(pickedObject.id).uuid;
            this.selecteduuid = uuid;
            this.selecteduid = pickedObject.id;
            let auditstatus = Vue.prototype.$panoiddict.get(pickedObject.id)
              .auditstatus;

            if (Vue.prototype.$auditstatusdict.has(auditstatus))
              this.selectedItem = Vue.prototype.$auditstatusdict.get(
                auditstatus
              );
            let cameratype = Vue.prototype.$panoiddict.get(pickedObject.id)
              .cameratype;

            // console.log(cameratype,Vue.prototype.$cameratypedict.has(cameratype));

            if (Vue.prototype.$cameratypedict.has(cameratype))
              this.selectcameratype = Vue.prototype.$cameratypedict.get(
                cameratype
              );
            //auditstatus":"none","cameratype":

            axios
              .get(
                Vue.prototype.$serverip +
                  "/DataIO/GetPanosPicture.ashx?path=" +
                  path
              )
              .then(function (response) {
                //  console.log(response.data);

                if (response.data.name == "") {
                  //alert("全景图不存在");
                  that.snackbar = true;
                  return;
                }
                var streetviewurl =
                  Vue.prototype.$serverip + "/Panos/" + response.data.name;

                that.show = true;

                var panostatus = Vue.prototype.$panoiddict.get(
                  that.selecteduid
                );

                var name =
                  "全景图_" + panostatus.filename + "_" + panostatus.uuid;

                that.titlename = name;

                Vue.prototype.$PSV.setPanorama(streetviewurl);
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              });

            Vue.prototype.$shwotootip(
              Vue.prototype.$gettooltiptext(pickedObject.id),
              earthPositionmd
            );
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      Vue.prototype.$removeallcitymb();

      axios
        .get(Vue.prototype.$serverip + "/DataIO/GetfullPanos.ashx")
        .then(function (response) {
          Vue.prototype.$showcitymb(response.data);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });

      this.show = true;

      // new PhotoSphereViewer({
      //   panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
      //   container: 'photosphere',
      //   caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
      //   loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
      //   defaultLat: 0.3,
      //   touchmoveTwoFingers: true,
      //   mousewheelCtrlKey: true,
      // });

      let path = require("../assets/sphere.jpg");
      //console.log(path, document.querySelector("#viewer"));

      if (Vue.prototype.$PSV == null) {
        Vue.prototype.$PSV = new Viewer({
          panorama: path, // 图片路径
          container: document.querySelector("#viewer"),
        });
        Vue.prototype.$PSV.refreshUi();
        Vue.prototype.$PSV.enterFullscreen();
        Vue.prototype.$PSV.exitFullscreen();

        //console.log(Vue.prototype.$PSV.getSize());
      } else {
        Vue.prototype.$PSV.setPanorama(path);
      }

      /* Vue.prototype.$PSV.rotate({
  x: 1,
  y: 1,
});*/
    },
  },
  mounted(){
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var year = d.getUTCFullYear();
        var month = d.getMonth();
        var day = d.getDate();
        var t=d.toLocaleTimeString('zh',{hour12:false});
        var textTime = document.getElementById("time")
        if(textTime)
        {
          textTime.innerHTML = d.toLocaleTimeString('zh',{hour12:false})
        }
        var textDate = document.getElementById("date")
        let weeks = ['日','一','二','三','四','五','六'];
        if(textDate)
        {
          textDate.innerHTML = year + "-" + month + "-" + day +  ' 星期' + weeks[d.getDay()] ;
        }
    }


    window.onresize=()=>{
      let ratio=0;
      if(window.devicePixelRatio !== undefined)
      {
        ratio = window.devicePixelRatio
      }

      if(ratio)
      {
          ratio = Math.round(ratio * 100)
      }
      document.body.style.setProperty('zoom',100 / Number(ratio) + '')
    }
  },
});
</script>

<style>
#CesiumPanelDiv {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  overflow: hidden;
}

#viewer {
  width: 100%;
  height: 60vh;
}

#testviewer {
  width: 100%;
  height: 60vh;
}


#chooselist {
  width: 20%;
  position: absolute;
  bottom: 20%;
}

#choosecameralist {
  width: 20%;
  position: absolute;
  bottom: 20%;
  right: 0;
}
</style>
